<div ng-controller="AppCtrl" layout="column" ng-cloak>
  <md-content class="md-padding">
    <md-tabs md-selected="selectedIndex" md-border-bottom md-autoselect md-swipe-content>
      <md-tab ng-repeat="tab in tabs"
              ng-disabled="tab.disabled"
              label="{{tab.title}}">
        <div class="demo-tab tab{{$index%4}}">
          <div ng-bind="tab.content"></div>
          <br/>
          <md-button class="md-primary md-raised" ng-click="removeTab( tab )"
                     ng-disabled="tabs.length <= 1">
            Remove Tab
          </md-button>
        </div>
      </md-tab>
    </md-tabs>
  </md-content>

  <form ng-submit="addTab(tTitle,tContent)" layout="column" class="md-padding">
    <div layout="row" layout-xs="column">
      <div flex>
        <h2 class="md-subhead">Add a new Tab:</h2>
      </div>
      <md-input-container>
        <label for="label">Label</label>
        <input type="text" id="label" ng-model="tTitle">
      </md-input-container>
      <md-input-container>
        <label for="content">Content</label>
        <input type="text" id="content" ng-model="tContent">
      </md-input-container>
      <md-button class="add-tab md-primary md-raised" ng-disabled="!tTitle || !tContent"
                 type="submit">
        Add Tab
      </md-button>
    </div>
  </form>
</div>
